<template>
	<div class="bigDiv">
		<el-form :inline="true" label-width="100px">
			<div class="topNav">
				<el-button type="text" icon="el-icon-search" @click="getList">搜索</el-button>
				<!-- <el-button type="text" @click="importHandle">导出excel</el-button> -->
			</div>
			<el-form-item label="查询上架时间" prop="time">
				<el-date-picker v-model="timeModel" type="daterange" range-separator="至" start-placeholder="开始日期"
					end-placeholder="结束日期" value-format="yyyy-MM-dd hh:mm:ss">
				</el-date-picker>
			</el-form-item>
		
			<el-form-item label="专区名称">
				<el-select size="small" v-model="queryParams.value"  placeholder="请选择专区" filterable
					clearable @change="changClass">
					<el-option v-for="item in stateList" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</el-form-item>
		</el-form>
		<el-table v-loading="loading" :data="list" border :cell-style="{padding: '17px 0px'}" height="calc(100vh - 350px)">
			<el-table-column label="品牌名" align="center" prop="brandName"></el-table-column>
			<el-table-column label="商品名称" align="center" prop="goodsName"></el-table-column>
			<el-table-column label="销量" align="center" prop="buynum" width="280"></el-table-column>
			<el-table-column label="购买用户数(个)" align="center" prop="purchasernum"></el-table-column>
			<el-table-column label="供应商名称" align="center" prop="supplierName"></el-table-column>
			<el-table-column label="上架时间" align="center" prop="putOnTime"></el-table-column>
		</el-table>
		<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
			:limit.sync="queryParams.pageSize" @pagination="getList" />
	</div>
</template>

<script>
	import {
		getRackhistory,
		// orderDetailNum,
		orderNum,
		getExport,
		// supplierList,
		getUnitNameList
	} from "@/api/leader/hzr";
	export default {
		name: "orgPriceList",
		// 页面数据
		data() {
			return {
				queryParams: {
					pageNum: 1, // 显示第一页数据
					pageSize: 10, //每页显示十条
					beginTime: "",
					endTime: "",
					value: "",
					supplierId: "",
					orderNo: "",
					unitName: []
				},
				loading: false,
				stateList: [{
					value: "工业品",
					label: "工业品"
				}, {
					value: "办公用品",
					label: "办公用品"
				}, {
					value: "LOCAL_FOCUS",
					label: "集采协同"
				}, {
					value: "LOCAL_SELF",
					label: "协议专区"
				}],
				mergerItems: [{
						columnIndex: 0,
						spanArr: [],
						pos: 0,
						prop: 'orderNo'
					},
					{
						columnIndex: 1,
						spanArr: [],
						pos: 0,
						prop: 'orderZiNo'
					},
					{
						columnIndex: 2,
						spanArr: [],
						pos: 0,
						prop: 'orderName'
					}
				],
				supplierList: [],
				unitNameList: [],
				orderDetail: {},
				countOrderNo: '',
				list: [],
				total: 0, // 一共多少条数据
				timeModel: [],
				orderCountOutList: []
			};
		},
		// 初始化
		mounted() {
			this.getList();
			// this.getSupplierList();
			// this.getUnitNameList();

			console.log('92', this.goodsClassList)
		},
		// 函数集合
		methods: {
			

			//初始化列表
			getList() {
				this.loading = true;
				//传入订单详情和分页数据
				this.queryParams.beginTime = this.timeModel[0]
				this.queryParams.endTime = this.timeModel[1]
				let params = {
					pageNum: this.queryParams.pageNum,
					pageSize: this.queryParams.pageSize,
					beginTime: this.queryParams.beginTime,
					endTime: this.queryParams.endTime,
					value: this.queryParams.value
					// supplierId: this.queryParams.supplierId,
					// orderNo: this.queryParams.orderNo,
					// unitName: this.queryParams.unitName
				}

				console.log('111', this.timeModel)
				getRackhistory(params).then(res => {
					this.list = res.rows
					this.total = res.total
					this.loading = false;
				})
				// orderDetailNum(params).then(res => {
				// 	this.orderDetail = res[0]
				// })
				// orderNum(params).then(res => {
				// 	this.countOrderNo = res[0]
				// })
			},
			//获取供应商列表
			getSupplierList() {
				// supplierList().then(res => {
				// 	this.supplierList = res
				// })
			},
			//获取开票单位列表
			getUnitNameList() {
				getUnitNameList().then(res => {
					this.unitNameList = res
				})
			},
			// 保存下载文件
			saveAs(blob, filename) {
				if (window.navigator.msSaveOrOpenBlob) {
					navigator.msSaveBlob(blob, filename)
				} else {
					const link = document.createElement('a')
					const body = document.querySelector('body')
					link.href = window.URL.createObjectURL(blob)
					link.download = filename
					link.style.display = 'none'
					body.appendChild(link)
					link.click()
					body.removeChild(link)
					window.URL.revokeObjectURL(link.href)
				}
			},
			// 导出订单
			importHandle() {
				if (this.timeModel) {
					this.queryParams.beginTime = this.timeModel[0]
					this.queryParams.endTime = this.timeModel[1]
				}
				let newSearch = {
					beginTime: this.queryParams.beginTime ? this.queryParams.beginTime : '',
					endTime: this.queryParams.endTime ? this.queryParams.endTime : '',
					value: this.queryParams.value ? this.queryParams.value : '',
					supplierId: this.queryParams.supplierId ? this.queryParams.supplierId : '',
					orderNo: this.queryParams.orderNo ? this.queryParams.orderNo : '',
					unitName: this.queryParams.unitName ? this.queryParams.unitName : '',
				}
				getExport(newSearch).then((res) => {
					let blob = new Blob([res], {
						type: 'application/vnd.ms-excel'
					})
					this.saveAs(blob, '订单统计.xls')
				})
			},
			changClass() {
				console.log(this.queryParams.value)
			},

		}
	}
</script>

<style>
	/* 	.el-col {
		font-size: 14px;
		margin: 10px 0px;

	} */

	.grid-content {
		/* border: 1px solid #dfe6ec; */
		padding: 0.25em 1.5em;
		/* margin-right: 0px !important; */
		margin-bottom: 0px !important;
	}

	.el-table-column {
		padding: 16px 0px;
	}
</style>
